<template>
  <div class="v-chart-operate-demo-container">
    <div class="component-example">
      <label class="example-title">使用示例</label>
      <div class="example">
        <div v-chart="firstOption" class="chart chart-first"></div>
        <div v-chart="secondOption" ref="secondRef" class="chart chart-second"></div>
        <div class="chart-third">
          <div v-chart="thirdOption" class="chart chart-left"></div>
          <div v-chart="fourthOption" class="chart chart-right"></div>
        </div>
        <div class="chart-fifth">
          <div v-chart="radarOption" class="chart chart-radar"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "VChartOperateDemo",
  data() {
    return {
      firstData: [],
      firstOption: {},
      secondData: [],
      secondOption: {},
      thirdData: [],
      thirdOption: {},
      fourthData: [],
      fourthOption: {},
      radarData: [],
      radarOption: {},
    }
  },
  mounted() {
    this.getFirstData();
    this.getSecondData();
    this.getThirdData();
    this.getFourthData();
    this.getRadarData();
  },
  methods: {
    // 1
    getFirstData() {
      this.firstData = [{"total": "37"}, {"total": "77", "year": "2002"}, {"total": "80", "year": "2003"}, {
        "total": "16",
        "year": "2004"
      }, {"total": "25", "year": "2005"}, {"total": "23", "year": "2006"}, {
        "total": "35",
        "year": "2007"
      }, {"total": "16", "year": "2008"}, {"total": "9", "year": "2009"}, {
        "total": "11",
        "year": "2010"
      }, {"total": "78", "year": "2011"}, {"total": "100", "year": "2012"}, {
        "total": "47",
        "year": "2013"
      }, {"total": "49", "year": "2014"}, {"total": "160", "year": "2015"}, {
        "total": "313",
        "year": "2016"
      }, {"total": "599", "year": "2017"}, {"total": "706", "year": "2018"}, {
        "total": "560",
        "year": "2019"
      }, {"total": "2246", "year": "2020"}, {"total": "339", "year": "2021"}]
      this.initFirstOption();
    },
    initFirstOption() {
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(249, 195, 0, 0)'
                }, {
                  offset: 0.5,
                  color: 'rgba(235, 75, 63, 1)',
                }, {
                  offset: 1,
                  color: 'rgba(249, 195, 0, 0)'
                }],
                global: false
              }
            },
          },
        },
        grid: {
          top: '13%',
          left: '3%',
          right: '3%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          axisLine: { //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: "#999"
            },
          },
          splitLine: {
            show: false,
          },
          axisLabel: { //坐标轴刻度标签的相关设置
            textStyle: {
              color: '#999',
              margin: 15,
            },
            formatter: function (data) {
              return data + "年"
            }
          },
          axisTick: {
            show: false,
          },
          data: this.firstData.map(el => {
            return el.year || 0;
          }),
        }],
        yAxis: [{
          type: 'value',
          name: '单位：户',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#999'
            },
          },
          nameTextStyle: {
            color: "#999",
            fontSize: 12,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#999',
            },
          },
          axisTick: {
            show: false,
          },
        }],
        series: [{
          name: '政策数量',
          type: 'line',
          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
          smooth: true,
          showAllSymbol: false,
          symbolSize: 10,
          lineStyle: {
            normal: {
              color: "#eb4b3f", // 线条颜色
            },
            borderColor: 'rgba(0,0,0,.4)',
          },
          itemStyle: {
            color: "#eb4b3f",
            borderColor: "#aaa",
            borderWidth: 1
          },
          tooltip: {
            show: true
          },
          areaStyle: { //区域填充样式
            normal: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "rgba(235, 75, 63,.8)"
              },
                {
                  offset: 1,
                  color: "rgba(235, 75, 63, 0)"
                }
              ], false),
              shadowColor: 'rgba(235, 75, 63, 0.9)', //阴影颜色
              shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
          },
          data: this.firstData.map(el => {
            return el.total || 0;
          }),
          markPoint: {
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return idx * 200 + 1000;
            },
            label: {
              // show: false
              position: 'right',
              distance: 15,
              formatter: (param) => {
                // return '满值预警功能'
                return `${param.name}年\n\n${param.value}户`
              },
              fontSize: 14,
              color: '#fff',
              backgroundColor: 'rgba(233,3,0, 0.4)',
              // borderColor: '#999',
              borderWidth: 1,
              borderRadius: 5,
              padding: [10, 20]
            },
            symbolSize: 30,
            symbolOffset: [0, "-30%"],
            data: [{
              type: 'max',
              itemStyle: {
                normal: {
                  color: {
                    type: 'radial',
                    x: 0.4,
                    y: 0.4,
                    r: 0.9,
                    colorStops: [{
                      offset: 0,
                      color: '#ff9900'
                    }, {
                      offset: 1,
                      color: 'rgb(249, 195, 0)'
                    }],
                    globalCoord: false
                  },
                  shadowColor: 'rgba(0, 0, 0, 0.6)',
                  shadowBlur: 5,
                }
              },
            }]
          },
        }, {
          name: '最大值',
          type: 'line',
          data: ['2000'],
          symbolSize: 0,
          markLine: {
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#f9c300'
                },
              }
            },
            data: [{
              type: 'average',
              name: '最大值'
            }]
          }
        }, {
          name: '最小值',
          type: 'line',
          data: ['0'],
          symbolSize: 0,
          markLine: {
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#f9c300'
                },
              }
            },
            data: [{
              type: 'average',
              name: '最小值'
            }]
          }
        },]
      }
      this.firstOption = {theme: 'wonderland', option}
    },
    // 2
    getSecondData() {
      this.secondData = [['北京', '上海', '山东', '浙江', '河南', '四川', '河北', '安徽', '湖南', '重庆', '青海', '吉林', '天津', '湖北', '西藏'], [88, 82, 78, 77, 76, 68, 62, 59, 54, 46, 43, 37, 26, 29, 11]]
      this.initSecondOption();
    },
    initSecondOption() {
      let option = {
        color: ['#eb4b3f'],
        legend: {
          textStyle: {
            color: '#9B9B9B'
          },
          right: 37,
          top: 22,
        },
        grid: {
          top: '13%',
          left: '3%',
          right: '3%',
          bottom: '5%',
          containLabel: true
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: this.secondData[0] || [],
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            rotate: 45,
          },
        },
        yAxis: {
          name: '单位：户',
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
        },
        series: [
          {
            type: 'bar',
            barWidth: 20,
            data: this.secondData[1] || [],
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#eb4b3f'
              }
            },
          }
        ]
      };
      this.secondOption = {theme: 'wonderland', option}
      this.$nextTick(() => {
        let instance = this.echarts.getInstanceByDom(this.$refs.secondRef);
        if (instance !== undefined) {
          instance.on('click', () => {
            this.getThirdData()
            this.getFourthData()
          })
        }
      })
    },
    // 3
    getThirdData() {
      let name = ['金融业', '科技服务业', '制造业', '批发零售业', '租赁业', '金融业', '科技服务业', '制造业', '批发零售业'];
      let num = name.map(el => {
        return Math.floor(Math.random() * 60)
      })
      this.thirdData = [name, num]
      this.initThirdOption();
    },
    initThirdOption() {
      let option = {
        color: '#eb4b3f',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '5%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          // boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: this.thirdData[0] || []
        },
        series: [
          {
            type: 'bar',
            data: this.thirdData[1] || []
          }
        ]
      };
      this.thirdOption = {theme: 'wonderland', option}
    },
    // 4
    getFourthData() {
      let name = ['归档', '校准', '审查', '受理', '申请提交', '预约服务'];
      let num = name.map(el => {
        return Math.floor(Math.random() * 60)
      })
      this.fourthData = [name, num]
      this.initFourthOption();
    },
    initFourthOption() {
      let option = {
        color: '#eb4b3f',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '5%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: this.fourthData[0] || []
        },
        series: [
          {
            type: 'bar',
            data: this.fourthData[1] || []
          }
        ]
      };
      this.fourthOption = {theme: 'wonderland', option}
    },
    // radar
    getRadarData() {
      let data = [20, 33, 80, 50, 30, 40, 100]
      let indicator =  [{
        name: 'Sunday',
        max: 100
      },
        {
          name: 'Monday',
          max: 100
        },
        {
          name: 'Tuesday',
          max: 100
        },
        {
          name: 'Wednesday',
          max: 100
        },
        {
          name: 'Thursday',
          max: 100
        },
        {
          name: 'Friday',
          max: 100
        },
        {
          name: 'Saturday',
          max: 100
        }
      ]
      this.radarData = [data, indicator]
      this.initRadarOption()
    },
    initRadarOption() {
      let option = {
        tooltip: {},
        radar: {
          radius: '60%',
          center: ['50%', '55%'],
          // startAngle: 0,
          splitNumber: 10,
          nameGap: '15',
          name: {
            textStyle: {
              color: '#a8a8a8',
            }
          },
          axisLine: {
            lineStyle: {
              color: '#ebebeb'
            }
          },
          splitLine: {
            lineStyle: {
              width: 1,
              color: '#ebebeb'
            }
          },
          splitArea: {
            areaStyle: {
              color: [ '#f8f8f8', '#fff', ].reverse(),
            }
          },
          indicator: this.radarData[1] || [],
        },
        series: [{
          name: 'Title✍',
          type: 'radar',
          symbolSize: 5,
          itemStyle: {
            borderColor: '#ebebeb',
            borderWidth: 2,
          },
          areaStyle: {
            normal: {
              width: 1,
              opacity: 0.3,
            },
          },
          data: [{
            itemStyle: {
              normal: {
                color: '#59c4bc',
              },
            },
            value: this.radarData[0] || []
          }]
        }]
      };
      this.radarOption = {theme: 'wonderland', option}
    }
  },
}
</script>

<style lang="scss" scoped>
.v-chart-operate-demo-container {
  width: 100%;
  height: 100%;

  .component-example {
    width: 100%;
  }

  .chart {
    border-radius: 5px;
    box-shadow: 1px 1px 4px 1px #999999;
  }

  .chart-first, .chart-second, .chart-third, .chart-fifth {
    height: 300px;
    margin-bottom: 10px;
  }

  .chart-third, .chart-fifth {
    display: flex;
    justify-content: space-between;

    .chart {
      width: calc(50% - 10px);
    }

    .chart-radar {
      width: 30%;
    }
  }
}
</style>
